import React, { memo, useState, useEffect, useCallback } from "react";

import Authentication from "@/components/Authentication/index.jsx";
import AlbumDate from "./child/albumDate";
import ThemeHeaderRcm from "@/components/theme-header-rcm";
import SongItem from "./child/songItem";
import sty from "./sty.module.css";
import cs from "classnames";
import { getRecommendSong } from "@/api/song-recommend";
import { useDispatch, useSelector, shallowEqual } from "react-redux";
import { useHistory } from "react-router-dom";
import { changeIsShow } from "@/components/theme-login/store";
import { formatMinuteSecond } from "../../../../utils/format-utils";
import bgImg from "@/assets/img/recommend-cover.jpg";
const Album = memo(() => {
  const [recommendPlayList, setRecommendPlayList] = useState([]);
  const dispatch = useDispatch();
  const { isLogin, cookie } = useSelector(
    (state) => ({
      isLogin: state.getIn(["loginState", "isLogin"]),
      cookie: state.getIn(["loginState", "cookie"]),
    }),
    shallowEqual
  );
  useEffect(() => {
    cookie &&
      getRecommendSong(cookie).then((res) => {
        let data = res.data.dailySongs;
        data = data.map((v, i) => {
          return {
            currentRanking: i + 1,
            coverPic: i < 3 ? v.al.picUrl : "",
            duration: formatMinuteSecond(v.dt),
            songName: v.name,
            singer: v.ar[0].name,
            songId: v.id,
          };
        });
        setRecommendPlayList(data);
      });
  }, [cookie]);
  const histrory = useHistory();
  const toRedirect = useCallback(() => {
    histrory.push("/");
  }, [histrory]);

  const showModal = useCallback(() => {
    dispatch(changeIsShow(true));
  }, [dispatch]);

  return (
    <div className={cs(sty.root, "wrap2")}>
      <Authentication flag={isLogin} to={toRedirect} showModal={showModal} />
      <div className="content" style={{ display: isLogin ? "block" : "none" }}>
        <div
          className={sty.recommendCoverBg}
          style={{ backgroundImage: `url(${bgImg})` }}
        >
          <AlbumDate />
        </div>
        <div className={sty.main}>
          <ThemeHeaderRcm
            title="歌曲礼包"
            keywords={["26首"]}
            right
            showIcon={false}
          />
          <div className={sty.topListMain}>
            <div className={sty.mainHd}>
              <div className={cs("sprite_table")}></div>
              <div className={cs("sprite_table", sty.title)}>标题</div>
              <div className={cs("sprite_table", sty.time)}>时常</div>
              <div className={cs("sprite_table", sty.singer)}>歌手</div>
            </div>
            <ul className={sty.list}>
              {recommendPlayList.length
                ? recommendPlayList.map((v, i) => <SongItem {...v} />)
                : null}
            </ul>
          </div>
        </div>
      </div>
    </div>
  );
});
export default Album;
